<template>
	<div class="danmu-container">
		<div class="danmu-wrapper">
			<div v-for="(message, index) in visibleMessages" :key="index" class="danmu-item">
				<div class="danmu-avatar">
					<image :src="message.avatar" alt="头像" />
				</div>
				<div class="danmu-content">
					{{ message.content }}
				</div>
			</div>
		</div>
		<div class="carousel-wrapper">
			<!-- 这里是你的轮播图组件，你需要将轮播图的代码插入到这里 -->
			<!-- 请确保轮播图不会覆盖到弹幕区域 -->
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			messages: {
				typeof: Array,
				default: () => ([{
						avatar: '头像1图片路径',
						content: '这是第一条弹幕',
					},
					{
						avatar: '头像2图片路径',
						content: '这是第二条弹幕',
					},
				])
			}
		},
		watch:{
			messages:{
				handler(){
					if (this.messages.length === 1) {
						// 如果只有一条消息，复制一条以实现循环播放
						this.messages.push({
							...this.messages[0]
						});
					}
				},
				immediate:true,
				deep: true
			}
		},
		data() {
			return {
				// messages: [], // 存储所有弹幕消息的数组
				visibleMessages: [], // 存储可见的弹幕消息的数组
				currentIndex: 0, // 当前弹幕索引
				intervalId: null, // 定时器ID
				danmuSpeed: 1, // 弹幕滚动速度，可以根据需要调整
				maxVisibleMessages: 2, // 可见的弹幕消息数量
			};
		},
		methods: {
			startDanmu() {
				// 开始弹幕滚动
				this.intervalId = setInterval(() => {
					this.currentIndex++;
					if (this.currentIndex >= this.messages.length) {
						this.currentIndex = 0;
					}
					this.updateVisibleMessages();
				}, 1500 / this.danmuSpeed);
			},
			stopDanmu() {
				// 停止弹幕滚动
				clearInterval(this.intervalId);
				this.intervalId = null;
			},
			updateVisibleMessages() {
				// 更新可见的弹幕消息数组
				const start = this.currentIndex;
				const end = start + this.maxVisibleMessages;
				this.visibleMessages = this.messages.slice(start, end);
			},
		},
		mounted() {
			// 开始弹幕滚动
			this.startDanmu();
		},
		beforeDestroy() {
			// 在组件销毁前停止定时器
			this.stopDanmu();
		},
	};
</script>

<style scoped>
	.danmu-container {
		position: relative;
		width: 100%;
		font-size: 24rpx;
		overflow: hidden;
		/* 隐藏溢出的弹幕消息 */
	}

	.danmu-wrapper {
		overflow: hidden;
		position: absolute;
		top: 35%;
		left: 30rpx;
		z-index: 9999;
		height: 180rpx;
		width: 40%;
		/* 设置弹幕容器的高度 */
	}

	.danmu-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		/* 弹幕之间的间距，可以根据需要调整 */
		white-space: nowrap;
		/* 不换行显示 */
		overflow: hidden;
		/* 溢出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分用省略号表示 */
		background-color: rgba(0, 0, 0, 0.7);
		/* 弹幕的背景色，可以根据需要调整 */
		color: #fff;
		/* 弹幕文字颜色，可以根据需要调整 */
		padding: 5px;
		/* 弹幕内边距，可以根据需要调整 */
		border-radius: 20px;
		/* 弹幕呈圆筒状，根据需要调整 */
	}

	.danmu-avatar {
		margin-right: 10rpx;
		/* 头像与弹幕内容之间的间距，可以根据需要调整 */
	}
	.danmu-content{
		letter-spacing: 0.1em;
		vertical-align: middle;
	}
	.danmu-avatar image {
		display: flex;
		align-items: center;
		width: 36rpx;
		/* 头像的宽度，根据需要调整 */
		height: 36rpx;
		/* 头像的高度，根据需要调整 */
		border-radius: 50%;
		/* 头像显示为圆形 */
	}


	.carousel-wrapper {
		/* 这里是轮播图容器的样式，根据你的轮播图组件来设置 */
	}
</style>